<template>
    <div class="main-container">
        <div class="editor-container editor-container_document-editor" ref="editorContainerElement">
            <div class="editor-container__toolbar" ref="editorToolbarElement"></div>
            <div class="editor-container__editor-wrapper">
                <div class="editor-container__editor">
                    <div ref="editorElement">
                        <ckeditor v-if="config" :modelValue="config.initialData" :editor="DecoupledEditor"
                                  :config="config" @ready="onReady"/>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;">
        <ul style="color: #666;">
            <li>参数的格式为: \${name}</li>
            <li>将生成的内容粘贴到：HTML 组件 -> 高级 -> 格式化函数 中</li>
        </ul>
        <button style="margin-top: 20px;" @click="onGetContent">生成内容</button>
        <textarea :value="content" style="width: 90vw; height: 300px; margin: 20px auto;"></textarea>
    </div>
</template>

<script setup>
/**
 * This configuration was generated using the CKEditor 5 Builder. You can modify it anytime using this link:
 */

import {computed, ref, onMounted, useTemplateRef} from 'vue';
import {Ckeditor} from '@ckeditor/ckeditor5-vue';

import editorConfig from "./editorConfig.js";

import 'ckeditor5/ckeditor5.css';
import {DecoupledEditor} from "ckeditor5";

const editorToolbar = useTemplateRef('editorToolbarElement');

const isLayoutReady = ref(false);

const config = computed(() => {
    if (!isLayoutReady.value) {
        return null;
    }
    return editorConfig
});

onMounted(() => {
    isLayoutReady.value = true;
});

let mainEditor = null;


function onReady(editor) {
    [...editorToolbar.value.children].forEach(child => child.remove());

    editorToolbar.value.appendChild(editor.ui.view.toolbar.element);
    mainEditor = editor;
}

const content = ref('')

const onGetContent = () => {
    const editorContent = mainEditor.getData();

    const wrapperHTMLContent = `
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <style>
                    @media print {
                        body {
                            margin: 0;
                            padding: 0;
                        }
                    }
                    .table {
                        margin: 0 auto;
                        text-align: left;
                        border-collapse: collapse;
                    }
                </style>
            </head>
            <body style="text-align: center;">
                    ${editorContent}
            </body>
        </html>
    `;

    const regex = /\${(\S+)}/g;

    const wrapperContent = [
        `function (title, value, options, templateData, target) {`,
        `var html = \`${wrapperHTMLContent}\`;`,
        `return options && Object.keys(options).length? html.replace(${regex.toString()}, (match, key) => options[key]): html;}`
    ].join("\n")


    content.value = wrapperContent;
}
</script>